<template>
  <div>
    <table-form
      v-if="active == 4"
      :disabled="disabled4"
      @next="step5Ctrl"
      @jump="jump"
    >
      <template slot="title">
        <h2 class="fromDivTit">
          <div>填写租客搬离时间</div>
          <i
            v-if="isEdit && detailRes.step <= 3"
            class="edit-icon"
            @click="isDisabled = true"
          />
        </h2>
      </template>
      <div class="form-body">
        <el-form
          ref="step4Form"
          :model="step4Form"
          :rules="rules5"
          label-width="100px"
        >
          <el-form-item
            label="搬离时间:"
            prop="moveDate"
            class="itxt itxtactive"
          >
            <el-date-picker
              v-model="step4Form.moveDate"
              :disabled="isEdit && !isDisabled"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 493px"
            />
          </el-form-item>
          <el-form-item label="备注:">
            <el-input
              v-model="step4Form.moveRemark"
              :disabled="isEdit && !isDisabled"
              placeholder="请输入内容"
              style="width: 493px; height: 113px"
              type="textarea"
            />
          </el-form-item>
        </el-form>
        <div v-if="jumpReason" class="jump-box">
          <div class="jump-reson">跳过原因:</div>
          <span>{{ jumpReason }}</span>
        </div>
      </div>

      <template v-if="isEdit" slot="footer">
        <div class="dialog-footer">
          <el-button
            v-if="isDisabled"
            :disabled="disabled4"
            type="primary"
            @click="saveEdit4"
          >保存</el-button>
        </div>
      </template>
    </table-form>

    <!-- 待上传搬离清单  -->
    <table-form
      v-if="active == 5"
      :disabled="disabled5"
      @next="step6Ctrl"
      @jump="jump"
    >
      <template slot="title">
        <h2 class="fromDivTit">
          <div div>请填写搬离信息</div>
          <i
            v-if="isEdit && detailRes.step <= 3"
            class="edit-icon"
            @click="isDisabled = true"
          />
        </h2>
      </template>
      <div class="form-body">
        <el-form
          ref="step5Form"
          :model="step5Form"
          :rules="rules6"
          label-width="100px"
        >
          <el-form-item label="清单资料:" label-width="100px">
            <Upload
              :id="id"
              :maxcount="5"
              :urls="step5Form.moveFilePath || ''"
              :disabled="isEdit && !isDisabled"
              tip="可上传PDF、视频(mp4)、图片(jpg/ png/ jpeg)"
              @getImage="getAdImage"
            />
          </el-form-item>
          <el-form-item label="相关说明:" prop="moveFileDesc">
            <el-input
              v-model="step5Form.moveFileDesc"
              :disabled="isEdit && !isDisabled"
              type="textarea"
              placeholder="请说明交接情况和莱福建议"
              style="width: 493px"
              :maxlength="200"
            />
          </el-form-item>
          <el-form-item label="" class="leasecss">
            租客搬离日期:
            {{ dateFormat2(step4Form.moveDate) }}
          </el-form-item>
        </el-form>
        <div v-if="jumpReason" class="jump-box">
          <div class="jump-reson">跳过原因:</div>
          <span>{{ jumpReason }}</span>
        </div>
      </div>
      <template v-if="isEdit" slot="footer">
        <div class="dialog-footer">
          <el-button
            v-if="isDisabled"
            :disabled="disabled5"
            type="primary"
            @click="saveEdit5"
          >保存</el-button>
        </div>
      </template>
    </table-form>

    <!-- 待业主确认 -->
    <table-form
      v-if="active == 6"
      :disabled="disabled6"
      @next="step7Ctrl"
      @jump="jump"
    >
      <template slot="title">
        <h2 class="fromDivTit">
          <div div>等待业主确认搬离信息</div>
          <i
            v-if="isEdit && detailRes.step <= 3"
            class="edit-icon"
            @click="isDisabled = true"
          />
        </h2>
      </template>
      <div class="form-body">
        <el-form ref="step6Form" :model="step6Form" label-width="100px">
          <el-row :gutter="32">
            <el-col :xs="24" :sm="8" :lg="8">
              <el-form-item label="待业主确认:" :required="true">
                <el-col :xs="24" :sm="24" :lg="24" class="agg">
                  {{ step6Form.confirm === 1 ? "已确认" : "未确认" }}
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="8" class="forP">
              <p
                :class="step6Form.confirm === 1 ? 'gray' : ''"
                @click="confirmed"
              >
                业主已确认
              </p>
            </el-col>
          </el-row>
          <el-form-item label="备注:">
            <el-input
              v-model="step6Form.confirmRemark"
              :disabled="isEdit && !isDisabled"
              type="textarea"
              placeholder="请输入"
              style="width: 493px"
            />
          </el-form-item>
        </el-form>
        <div v-if="jumpReason" class="jump-box">
          <div class="jump-reson">跳过原因:</div>
          <span>{{ jumpReason }}</span>
        </div>
      </div>
      <template v-if="isEdit" slot="footer">
        <div class="dialog-footer">
          <el-button
            v-if="isDisabled"
            :disabled="disabled6"
            type="primary"
            @click="saveEdit6"
          >保存</el-button>
        </div>
      </template>
    </table-form>

    <!-- 搬离成功 -->
    <table-form v-if="active == 7" @jump="jump">
      <template slot="title">
        <h2 class="fromDivTit">搬离成功</h2>
      </template>
      <div class="content_box">
        <h2 class="fontcss">租客已成功搬离!</h2>
        <h5>
          租客搬离从{{ dateFormat2(leaseData.moveStartTime) }}至{{
            dateFormat2(leaseData.moveCompleteTime)
          }}，共耗时{{
            diffDates(leaseData.moveStartTime, leaseData.moveCompleteTime)
          }}天
        </h5>
      </div>
      <template slot="footer">
        <div class="div_back">
          <el-button type="primary" @click="nextList">返回列表</el-button>
        </div>
      </template>
    </table-form>
  </div>
</template>
<script>
import TableForm from '../tableForm.vue'
import Upload from '@/components/Upload/SingleImage4'
import {
  leaseStep5,
  leaseStep6,
  leaseStep7confirm,
  leaseStep7,
  leaseDetail,
  edit
} from '@/api/lease'
import { dateFormat2, diffDates } from '@/utils/common'

export default {
  components: {
    TableForm,
    Upload
  },
  props: {
    active: {
      type: Number,
      default: 0
    },
    id: {
      type: String,
      default: ''
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      diffDates,
      dateFormat2,
      isDisabled: false,
      disabled: false,
      disabled4: true,
      disabled5: true,
      disabled6: true,
      leaseData: {},
      detailRes: {
        jumpList: []
      },
      step4Form: {
        moveDate: new Date(),
        moveRemark: '',
        id: '',
        stepName: '待确认租客搬离时间'
      },
      step5Form: {
        moveFilePath: '',
        moveFileDesc: '',
        id: ''
      },
      step6Form: {
        confirm: 0,
        confirmRemark: '',
        id: ''
      },
      rules5: {
        moveDate: [
          { required: true, message: '请选择搬离日期', trigger: 'blur' }
        ]
      },
      rules6: {
        moveFileDesc: [
          { required: true, message: '请填写相关说明', trigger: 'blur' }
        ]
      },
      fileList: [],
      textarea: '',
      confirm: '未确定',
      unConfirmed: '业主已确认'
    }
  },
  computed: {
    jumpReason() {
      if (!this.detailRes.jumpList) return ''
      const hasReason = this.detailRes.jumpList.find((item) => {
        return item.jumpStep === this.active + 1
      })
      return hasReason ? hasReason.jumpNote : ''
    }
  },
  watch: {
    step4Form: {
      handler(newVal, oldVal) {
        if (newVal.moveDate) {
          this.disabled4 = false
        } else {
          this.disabled4 = true
        }
      },
      deep: true
    },
    step5Form: {
      handler(newVal, oldVal) {
        if (newVal.moveFileDesc) {
          this.disabled5 = false
        } else {
          this.disabled5 = true
        }
      },
      deep: true
    },
    step6Form: {
      handler(newVal, oldVal) {
        if (newVal.confirm === 1) {
          this.disabled6 = false
        } else {
          this.disabled6 = true
        }
      },
      deep: true
    },

    active(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.getLeaseDetail()
        this.isDisabled = false
      }
    }
  },
  created() {
    this.step4Form.id = this.id
    this.step5Form.id = this.id
    this.step6Form.id = this.id
    this.getLeaseDetail()
  },
  mounted() {
    if (!this.isEdit) {
      this.step4Form = {
        moveDate: new Date(),
        moveRemark: '',
        id: '',
        stepName: '待确认租客搬离时间'
      }
      this.step5Form = {
        moveFilePath: '',
        moveFileDesc: '',
        id: '',
        stepName: '请上传搬离清单'
      }
      this.step6Form = {
        confirm: 0,
        confirmRemark: '',
        id: '',
        stepName: '待业主确认'
      }
    }
  },
  methods: {
    async getLeaseDetail() {
      var leaseRes = await leaseDetail(this.id)
      this.leaseData = leaseRes.data
      this.detailRes = leaseRes.data
      this.step4Form = Object.assign(
        {},
        {
          moveDate: leaseRes.data.moveDate
            ? new Date(leaseRes.data.moveDate)
            : null,
          moveRemark: leaseRes.data.moveRemark,
          id: this.id,
          stepName: '待确认租客搬离时间'
        }
      )
      this.step5Form = Object.assign(
        {},
        {
          moveFilePath: leaseRes.data.moveFilePath,
          moveFileDesc: leaseRes.data.moveFileDesc,
          id: this.id,
          stepName: '请上传搬离清单'
        }
      )
      this.step6Form = Object.assign(
        {},
        {
          confirm: leaseRes.data.confirm,
          confirmRemark: leaseRes.data.confirmRemark,
          id: this.id,
          stepName: '待业主确认'
        }
      )
    },
    getAdImage(img) {
      this.step5Form.moveFilePath = img
    },
    async step5Ctrl() {
      // this.$emit('next')
      this.$refs['step4Form'].validate(async(valid) => {
        if (valid) {
          var step5Res = await leaseStep5(this.step4Form)
          if (step5Res.code === 200) {
            this.$emit('next')
          }
        }
      })
    },
    async step6Ctrl() {
      // this.$emit('next')
      this.$refs['step5Form'].validate(async(valid) => {
        if (valid) {
          var step6Res = await leaseStep6(this.step5Form)
          if (step6Res.code === 200) {
            this.$emit('next')
          }
        }
      })
    },
    async confirmed() {
      await leaseStep7confirm(this.id)
      this.step6Form.confirm = 1
    },
    async step7Ctrl() {
      // this.$emit('next')
      this.$refs['step6Form'].validate(async(valid) => {
        if (valid) {
          var step7Res = await leaseStep7(this.step6Form)
          if (step7Res.code === 200) {
            this.$emit('next')
          }
        }
      })
    },
    async saveEdit4() {
      var res = await edit(this.step4Form)
      if (res.code === 200) {
        this.$message({ message: '操作成功', type: 'success' })
        this.isDisabled = false
      }
    },
    async saveEdit5() {
      var res = await edit(this.step5Form)
      if (res.code === 200) {
        this.$message({ message: '操作成功', type: 'success' })
        this.isDisabled = false
      }
    },
    async saveEdit6() {
      var res = await edit(this.step6Form)
      if (res.code === 200) {
        this.$message({ message: '操作成功', type: 'success' })
        this.isDisabled = false
      }
    },
    async jump() {
      var res = await leaseDetail(this.id)
      var { step } = res.data
      if (step === 5) {
        this.$emit('jump', this.step4Form)
      } else if (step === 6) {
        this.$emit('jump', this.step5Form)
      } else if (step === 7) {
        this.$emit('jump', this.step6Form)
      }
    },
    nextList() {
      this.$router.push({ path: 'lease' })
    }
  }
}
</script>
<style lang="scss">
.el-textarea__inner {
  height: 113px !important;
}
.formdiv {
  background: transparent !important;
}
.leasecss {
  color: #d0d0d0;
}
.fontcss {
  font-weight: normal;
  font-family: SourceHanSansSC-regular;
  text-align: center;
}
h5 {
  text-align: center;
  color: #d0d0d0;
}
.through {
  border-width: 100%;
  border-color: black;
}
.content_box {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 300px;
  justify-content: center;
}
.centent_div {
  padding-left: 100px;
  margin-top: -38px;
  color: #d0d0d0;
}
.forP p {
  margin-left: 110px;
  color: #5ac6b7;
  font-size: 12px;
  cursor: pointer;
}
.gray {
  color: gray !important;
  cursor: not-allowed !important;
}
.div_back {
  margin-left: 800px;
}
.form-body {
  display: flex;
  .jump-box {
    margin-left: 50px;
    word-break: break-all;
    .jump-reson {
      color: #5ac6b7;
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
</style>
